<template>
  <Layout desc="使用position-anchor实现锚点定位">
    <div class="mt-60 relative">
      <ul class="flex text-2xl">
        <li v-for="i in datas" :key="i">
          <a href="#">{{ i }}</a>
        </li>
        <div class="panel"></div>
      </ul>
    </div>
  </Layout>
</template>

<script setup lang="ts">
const datas = ref(['apple', 'banana', 'orange', 'peach', 'pear'])
</script>

<style scoped lang="scss">
ul::before {
  content: '';
  position: absolute;
  bottom: 0;
  height: 5px;
  background: transparent;

  left: anchor(var(--target) left);
  right: anchor(var(--target) right);
  transition: 0.3s all;
  transform: scaleX(5);
}

ul:hover::before {
  background: #000;
  transform: scaleX(1);
}

@for $i from 1 to 6 {
  ul:has(li:nth-child(#{$i}):hover) {
    --target: --anchor-#{$i};
  }
  li:nth-child(#{$i}) {
    anchor-name: --anchor-#{$i};
  }
}

li {
  padding: 5px 20px;
}
</style>
